<script setup>
import {
  GetListAPI,
  AddDataAPI,
  EditDataAPI,
  DelDataAPI,
  GetDataAPI,
} from '@/api/system/modeling'
import SubmitForm from './submitForm.vue'
const { proxy } = getCurrentInstance()
/**
 * 表单字段
 */
const submitForm = ref({})

/**
 * 表格数据
 */
const tableData = ref([])

/**
 * 表格枚举
 */
const columns = ref([
  { label: '区域名称', prop: 'regionName', treeNode: true },
  { label: '区域编码', prop: 'regionCode' },

  { label: '创建时间', prop: 'createTime' },
  { label: '创建人', prop: 'createBy' },
  { label: '操作', prop: 'x' },
])

/**
 * 各种状态
 */
const state = reactive({
  loading: false,
  total: 0,
  btnLoading: false,
  isShow: false,
  title: '新增',
  category: '', // 类别
  row: [],
  ids: [],
})

/**
 * 模糊查询枚举
 */
const selectList = ref([{ label: '名称', model: 'regionName', type: '输入框' }])

/**
 * 按钮枚举
 */
const btnList = ref([
  { type: 'add', label: '新增', emit: 'add', hasPermi: 'system:modelings:add' },
  // {
  //   type: 'remove',
  //   label: '删除',
  //   emit: 'remove',
  //   isDel: true,
  //   hasPermi: 'system:modelings:remove',
  // },
])

/**
 * 查询字段表
 */
const query = reactive({})

/***
 * 新增弹窗 type为1 是最上级新增 其他为下级
 */
const addDic = (type, obj) => {
  state.type = type
  state.title = '新增'
  state.isShow = true
  submitForm.value = { parentId: obj.id }
}

/**
 * 修改弹窗
 */
const editDic = async (val) => {
  try {
    proxy.loading()
    const { data: result } = await GetDataAPI(val.id)
    submitForm.value = result
    state.type = val.parentId == 0 ? 1 : 2
    state.title = '修改'

    state.isShow = true
  } catch (err) {
    console.error(err)
  } finally {
    proxy.closeLoading()
  }
}

/**
 * 新增提交
 */
const addSub = async () => {
  const result = await proxy.$refs.submitFormRef.submit()
  if (!result) return
  state.btnLoading = true
  try {
    result.type = state.type
    console.log(state.type)

    await AddDataAPI(result)
    proxy.successMsg('新增成功!')
    close()
    getList()
  } catch {
  } finally {
    state.btnLoading = false
  }
}

/**
 * 修改提交
 */
const editSub = async () => {
  const result = await proxy.$refs.submitFormRef.submit()
  if (!result) return
  state.btnLoading = true
  try {
    await EditDataAPI(result)
    proxy.successMsg('修改成功!')
    close()
    getList()
  } catch {
  } finally {
    state.btnLoading = false
  }
}

/**
 * 删除
 */
const remove = async (id) => {
  try {
    proxy.loading('删除中，请稍后')
    await DelDataAPI(id)
    getList()
    proxy.successMsg('删除成功')
  } catch (err) {
    console.error(err)
  } finally {
    proxy.closeLoading()
  }
}

/**
 * 关闭弹窗
 */
const close = () => {
  state.isShow = false
  submitForm.value = {}
}

/**
 * 查询
 */
const selectSubmit = () => {
  query.regionName = ''
  getList()
}

/**
 * 查询列表
 */
const getList = async () => {
  try {
    state.loading = true
    const result = await GetListAPI(query)
    tableData.value = result.data
  } catch (err) {
    console.error(err)
  } finally {
    state.loading = false
  }
}

getList()
</script>
<template>
  <div class="app-container">
    <!-- 查询条件组件 -->

    <!-- <p-select-form :selectForm="selectList" @selectSubmit="selectSubmit" /> -->
    <div style="margin-bottom: 20px">
      <el-input
        v-model="query.regionName"
        style="width: 200px; margin-right: 20px"
        placeholder="输入名称"
      />
      <el-button type="primary" @click="getList">查询</el-button>
      <el-button @click="selectSubmit">重置</el-button>
    </div>
    <p-button :list="btnList" @add="addDic(1)" @remove="batchRemove" />
    <el-card>
      <!-- 表格数据 -->
      <p-elTable
        class="tableClass"
        isTree
        key="id"
        :isSel="false"
        :index="false"
        :loading="state.loading"
        :data="tableData"
        :column="columns"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        :total="state.total"
        @change="handleSelectionChange"
        @pagination="getList"
      >
        <template #buttons>
          <!-- 按钮组件 -->
          <!-- <p-button :list="btnList" @add="addDic" @remove="batchRemove" /> -->
        </template>
        <template #columnCell="{ column, record }">
          <p-operate
            v-if="column.prop == 'x'"
            :list="[
              {
                icon: 'add',
                emit: 'add',
                text: '新增',
                type: 'primary',
                noShow: record.parentId != 0,
                hasPermi: 'system:modelings:add',
              },
              {
                icon: 'edit',
                emit: 'edit',
                text: '修改',
                type: 'primary',
                hasPermi: 'system:modelings:edit',
              },
              {
                icon: 'DeleteFilled',
                emit: 'remove',
                text: '删除',
                isDel: true,
                type: 'danger',
                hasPermi: 'system:modelings:remove',
              },
            ]"
            @add="addDic(2, record)"
            @edit="editDic(record)"
            @remove="remove(record.id)"
          />
        </template>
      </p-elTable>
    </el-card>

    <!-- 弹窗 新增-修改 -->
    <p-dialog
      v-model="state.isShow"
      :title="state.title"
      @ok="state.title == '新增' ? addSub() : editSub()"
      @close="close"
      width="60%"
    >
      <SubmitForm ref="submitFormRef" :data="submitForm" :type="state.type" />
    </p-dialog>
  </div>
</template>

<style scoped lang="scss"></style>
